<template>
   <div class="collections-box">
      <div class="selection" @click="_checkbox($event)">
         <i class="el-icon-circle-check selection-left"
            id="check"
            v-show="showlabel"
            :class="[checkboxClass ? 'checkbox-bule' :'checkbox-ash']"
         ></i>
         <div class="selection-right">
            <button id="MultiSelection" v-if="MultiSelection">多选</button>
            <button id="selection" v-else>{{selectionInfo}}</button>
            <button id="Selected">删除已选</button>
         </div>
      </div>
      <div v-if="collections">
         <el-row v-if="Object.keys(content).length"
                 v-for="(item, index) of content"
                 :key="index"
                 class="absulote"
         >
            <el-col :span="16">
               <div class="grid-content bg-purple">
                  <div class="checkbox" v-show="showlabel">
                     <label :for="item.id" class="label-box">
                        <i class="el-icon-circle-check checkbox-ash"
                           :data-index="item.id"
                        ></i>
                     </label>
                     <input v-show="false" type="checkbox" :id="item.id" @change="_change($event, item.id)">
                  </div>
                  <div class="collections-left">
                     <div class="img">
                        <router-link :to="'/'+item.path+'/'+item.id">
                           <img
                              :src="item.data.written_message[0].versionsName.versions_S[0].color[0].data[0].color_classification[0].img_url_D_0"
                              alt="">
                        </router-link>
                     </div>
                     <div class="title">
                        <p class="titleName">{{item.data.written_message[0].title.titleName}}</p>
                        <p class="describe">
                           <span>{{item.data.written_message[1].clearfix[0].property_name}}</span>
                           <span>{{item.data.written_message[1].clearfix[1].property_name}}</span>
                        </p>
                        <p class="describe">
                           <span>{{item.data.written_message[2].clearfix[0].property_name}}</span>
                           <span>{{item.data.written_message[2].clearfix[1].property_name}}</span>
                        </p>
                        <p class="describe">
                           <span>{{item.data.written_message[0].versionsName.versions}}</span>
                           <span>{{item.data.written_message[0].versionsName.versions_S[0].versions}}</span>
                        </p>
                        <p class="describe">
                           <span>价格:</span>
                           <span>{{item.data.written_message[0].versionsName.versions_S[0].price}}</span>
                        </p>
                     </div>
                  </div>
               </div>
            </el-col>
            <el-col :span="8">
               <div class="grid-content bg-purple flex-end">
                  <el-button type="info" v-show="!showlabel" @click="_deleteCollection(true, item.id)">删除收藏</el-button>
               </div>
            </el-col>
         </el-row>
      </div>
      <el-button v-show="false" :plain="true"></el-button>
      <model ref="model"
             v-if="isModeDisplay"
             @axiosDeleteCollection="_axiosdeleteCollection"
             @cancel="_cancelDeleteCollection"
             @allOptions="_deleteSelected"
             @allCancel="_allCancel"
      ></model>
      <message v-if="isMessageDisplay"
               ref="message"
      ></message>
   </div>
</template>

<script>
   import {list, lists} from '../../assets/util/util'
   import model from '../../components/model-box/model-box'
   import message from '../../components/message-box/message-box'
   import {mapGetters} from 'vuex'

   export default {
      name: "collections-box",
      data() {
         return {
            content: {},
            checked: [],
            key: '',
            selectionInfo: '全选',
            checkbox: false,
            checkboxClass: false,
            isIndeterminate: true,
            checkAll: false,
            id: '',
            showlabel: false,
            cancel: true,
            MultiSelection: true,
            isModeDisplay: false,
            isMessageDisplay: false
         }
      },
      props: {
         collection: {
            type: Object,
            default() {
               return {}
            }
         }
      },
      computed: {
         collections() {
            return this.collection
         },
         checkeds() {
            return this.checked[this.id] === this.id ? this.checked[this.id] : ''
         },
         ...mapGetters(['loginMessage'])
      },
      mounted() {
         let body = document.querySelector('body')
         body.style.background = '#fff'
         console.log(this.content)
      },
      methods: {
         _path(newVal) {
            this.content = {}
            let data = newVal.collections
            this.key = Object.keys(data)
            Object.keys(data).forEach((item, index) => {
               this.content[item] = data[item]
            })
            if (Object.keys(data).length) {
            }
         },
         _change(e, id) {
            let label = document.querySelectorAll('.label-box i')
            let _id = ''
            if (e.target.checked) {
               Array.from(label).forEach((item, index) => {
                  _id = lists.customAttribute(item, 'index')
                  if (_id === id) {
                     e.target.checked = true
                     this._checkedClassName(item, 'checkbox-ash', 'checkbox-bule')
                     this.checked.push(id)
                  }
               })
               let isChecked = Array.from(label).every(item => {
                  return lists.hasClass(item, 'checkbox-bule')
               })
               if (isChecked) {
                  this.checkboxClass = true
               }
               if (this.checked.length === this.key.length) {
                  this.checkbox = true
                  this.selectionInfo = '取消全选'
               }
            } else {
               Array.from(label).forEach((item, index) => {
                  _id = lists.customAttribute(item, 'index')
                  if (_id === id) {
                     e.target.checked = false
                     this.checkbox = false
                     this._checkedClassName(item, 'checkbox-bule', 'checkbox-ash')
                     this.checked = this.checked.filter((item) => {
                        return item !== id
                     })
                     this.checkboxClass = false
                  }
               })
               if (this.checked.length !== this.key.length) {
                  this.checkbox = false
                  this.selectionInfo = '全选'
               }
            }
            console.log(this.checked)
         },
         _checkedClassName(item, hasClassName, addClassName) {
            if (lists.hasClass(item, hasClassName)) {
               lists.removeClass(item, hasClassName)
               lists.addClass(item, addClassName)
            } else {
               lists.addClass(item, addClassName)
            }
         },
         _checkbox(e) {
            let elem = e.target
            if (elem.id === 'selection' || elem.id === 'check') {
               let label = document.querySelectorAll('.label-box i')
               let input = document.querySelectorAll('.checkbox input[type=checkbox]')
               if (this.checkbox) {
                  this.checkbox = false
                  this.checkboxClass = false
                  this._addClassChecked(label, 'checkbox-bule', 'checkbox-ash')
                  Array.from(input).forEach((item, index) => {
                     item.checked = false
                  })
                  this.checked = []
                  this.selectionInfo = '全选'
                  this.showlabel = false
                  this.MultiSelection = true
               } else {
                  this.checkbox = true
                  this.checkboxClass = true
                  this._addClassChecked(label, 'checkbox-ash', 'checkbox-bule')
                  Array.from(input).forEach((item, index) => {
                     item.checked = true
                  })
                  this.checked = this.key
                  this.cancel = false
                  this.selectionInfo = '取消全选'
                  this.showlabel = true
               }
            } else if (elem.id === 'Selected') {
               this.isModeDisplay = true
               this.$nextTick(() => {
                  this.$refs.model._getById({
                     id: this.checked,
                     dtermineName: 'allOptions',
                     cancelName: 'allCancel'
                  })
               })
            } else if (elem.id === 'MultiSelection') {
               this.MultiSelection = false
               this.showlabel = true
            } else {
               return false
            }
            console.log(this.checked)
         },
         _addClassChecked(items, hasclassName, addClassName) {
            Array.from(items).forEach((item, index) => {
               if (lists.hasClass(item, hasclassName)) {
                  lists.removeClass(item, hasclassName)
                  lists.addClass(item, addClassName)
               } else {
                  lists.addClass(item, addClassName)
               }
            })
         },
         _deleteSelected(arrId) {
            if (arrId.length <= 0) {
               this.open2('至少选中一项', 'warning')
               return
            }
            let user_id = this.loginMessage.user._id
            this.$axios.post('/apis/collection/deleteCollection', {id: arrId, user_id}).then(res => {
               if (res.data.success) {
                  this.$emit("collection")
                  this.isMessageDisplay = true
                  this.$nextTick(() => {
                     this.$refs.message.open2("恭喜你，删除所有收藏成功")
                  })
               }
            })
         },
         open2(message, type = 'success') {
            this.$message({
               message: message,
               type: type
            })
         },
         _deleteCollection(isclose, id) {
            this.isModeDisplay = isclose
            this.$nextTick(() => {
               this.$refs.model._getById({id, dtermineName:'axiosDeleteCollection',
                  cancelName:'cancel'}
                  )
            })
         },
         _axiosdeleteCollection(id) {
            if (!id) return
            let user_id = this.loginMessage.user._id
            this.$axios.post('/apis/collection/deleteCollection', {id: [id], user_id}).then(res => {
               console.log(res)
               if (res.data.success) {
                  this.$emit("collection")
                  this.isModeDisplay = false
                  this.isMessageDisplay = true
                  this.$nextTick(() => {
                     this.$refs.message.open2('删除成功')
                  })
               }
            })
         },
         _cancelDeleteCollection(is) {
            this.isModeDisplay = is
         },
         _allCancel(is) {
            this.isModeDisplay = is
         }
      },
      components: {
         model,
         message
      },
      watch: {
         collection: {
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
               this._path(newVal)
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .selection-left
      float left

   .selection-right
      float right

   .collections-box i
      cursor pointer

   .selection
      &::after
         content ""
         display block
         clear both
      width 100%
      padding 10px 0
      border-bottom 1px solid #dad1cd
      button
         background #909399
         color #ffffff
         width 100px
         height 30px
         border-radius 10px
         outline none
         border none
      .buttonBule
         background #00b6ff

   .grid-content
      margin 10px 0
      margin-bottom 30px
      padding 10px 0
      border-bottom 1px solid #ccc

   .collections-left
      display flex
      .title
         margin-left 50px
         .describe
            color #999
            span
               &:nth-child(1)
                  display inline-block
                  width 100px
               margin-right 20px
         p
            padding 5px 0
         .titleName
            font-size 20px
            color red
      img
         width 200px

   .bg-purple
      height 200px
      display flex
      align-items center

   .flex-end
      justify-content flex-end

   .checkbox-ash
      font-size 30px
      color #adadad

   .checkbox-bule
      font-size 30px
      color #00b6ff

   .checkbox
      width 50px
</style>
